<!DOCTYPE HTML>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>租房网-预约</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="/css/pc/client/common.css">
    <!--[if lte IE 8]>
    <script src="/common/js/html5shiv.js"></script>
    <![endif]-->
    <script src="https://hm.baidu.com/hm.js?d6b1afd88bad903f6c136281ac832114"></script>
    <link rel="stylesheet" type="text/css" href="/css/pc/client/personal.css">
    <link rel="stylesheet" type="text/css" href="/css/pc/client/memAppointment.css">

</head>
<body>
<input type="hidden" th:value="${session.username}" name="username" id="username">
<div class="header">
    <div class="nav-wrap">
        <div class="logo">
            <a rel="nofollow" href="#">
                <img src="/img/pc/client/home/logo.png" height="32" alt="租房网">
            </a>
        </div>
        <div class="city-wrap" style="cursor: default;">
            <span th:text="${cityName}"></span><i></i>
            <ul>
                    <span th:each="retAddress,status:${retAddressList}">
                        <span th:if="${retAddress.cityName} != ${cityName}">
                            <li><a rel="nofollow" th:href="@{/retPersonage/personage(id=${retAddress.id})}"
                                   th:text="${retAddress.cityName}"></a></li>
                        </span>
                    </span>
            </ul>
            <!-- <span>[<a rel="nofollow" href="https://www.zufun.cn/index" class="link" target="_blank">切换城市</a>]</span> -->
        </div>
        <div class="nav-items">
            <div class="nav-item">
                <a rel="nofollow" th:href="@{/retAddress/index}">首页</a>
            </div>

            <div class="nav-item">
                <a th:href="@{/retAddress/searchList}">租房</a>
            </div>

            <div class="nav-item">
                <a rel="nofollow" href="https://www.zufun.cn/platform" target="_blank">物业平台</a>
            </div>

            <div class="nav-item user-down-wrap" id="login_holder">
                <a href="#loginModal" rel="nofollow" data-toggle="modal" data-target="#loginModal">注册/登录</a>
            </div>
        </div>
    </div>
</div>
<div id="container">
    <div id="left_nav">
        <div class="per-info">
            <ul>
                <li>
                    <a href="/retPersonage/personage">个人信息</a>
                </li>
                <li>
                    <a href="/retPersonage/message">
                        系统消息
                    </a>
                </li>
                <li>
                    <a href="/retPersonage/favorite">
                        我的收藏
                    </a>
                </li>
                <li class="per-active">
                    <a href="/retPersonage/appointment">
                        预约管理
                    </a>
                </li>
                <li>
                    <a href="/retPersonage/apt/index">
                        出租房源
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="con-title">
            预约看房
        </div>
    </div>
</div>
<!-- 取消预约 -->
<span id="yuding" style="display: none">
<div  tabindex="0" style="opacity: 0.7; background: rgb(0, 0, 0); position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; user-select: none; z-index: 1024;" class="ui-popup-backdrop"></div>
<div tabindex="-1" style="position: absolute; outline: 0px; left: 550px; top: 100px; z-index: 1025;" class="ui-popup ui-popup-modal ui-popup-show ui-popup-focus" role="alertdialog">
    <div i="dialog" class="ui-dialog">
        <div class="ui-dialog-arrow-a"></div>
        <div class="ui-dialog-arrow-b"></div>
        <table class="ui-dialog-grid">
            <tbody>
            <tr>
                <td i="header" class="ui-dialog-header">
                    <button i="close" class="ui-dialog-close" id="yudincolse" title="cancel">×</button>
                    <div i="title" class="ui-dialog-title">取消预约</div>
                </td>
            </tr>
            <tr>
                <td i="body" class="ui-dialog-body">
                    <div i="content" class="ui-dialog-content"
                         style="width: 500px; height: 200px;">
                        <form id="cancel_appoint_form" novalidate="novalidate" data-type="1">
                            <div class="t-c ma-top textarea">
                                <textarea placeholder="取消原因..." name="qxYuanyin" id="qxYuanyin" aria-required="true"
                                          class="valid" aria-invalid="false"></textarea><label
                                    id="cancel_ma_reason-error" class="error" for="cancel_ma_reason"
                                    style="display: none;"></label>
                            </div>
                        </form>
                    </div>
                </td>
            </tr>
            <tr>
                <td i="footer" class="ui-dialog-footer">
                    <div i="statusbar" class="ui-dialog-statusbar" style="display: none;"></div>
                    <div i="button" class="ui-dialog-button">
                        <button type="button" i-id="确定"  id="quxiao" class="ui-dialog-autofocus">确定</button>
                        <button type="button" id="quxiao1" i-id="取消">取消</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</span>
<!-- 投诉 -->
<table class="table-l" id="ap_advise_con" style="display: none">
    <tbody>
    <tr>
        <td class="check-box"><input type="checkbox" value="1">房源描述不符</td>
        <td rowspan="6" class="area-box">
            <textarea placeholder="问题描述"></textarea>
        </td>
    </tr>
    <tr>
        <td class="check-box"><input type="checkbox" value="2">未能安排看房</td>
    </tr>
    <tr>
        <td class="check-box"><input type="checkbox" value="5">服务态度差</td>
    </tr>
    <tr>
        <td class="check-box"><input type="checkbox" value="6">其他问题</td>
    </tr>
    </tbody>
</table>
<!-- /buldings -->
<div style="clear:both"></div>
<div class="new-footer" style="margin-top:20px;">
    <div class="site-zufun">
        <div class="site-info">
            <p>
                <a rel="nofollow" href="https://www.zufun.cn/about" target="_blank">关于我们</a><span>|</span>
                <a rel="nofollow" href="https://www.zufun.cn/question" target="_blank">常见问题</a><span>|</span>
                <a rel="nofollow" href="https://www.zufun.cn/business" target="_blank">商务合作</a><span>|</span>
                <a rel="nofollow" href="https://www.zufun.cn/job" target="_blank">招聘信息</a><span>|</span>
                <a rel="nofollow" href="https://www.zufun.cn/protocol" target="_blank">服务声明</a><span>|</span>
                <a rel="nofollow" href="javascript:void(0);" onclick="suggest();">意见反馈</a><span>|</span>
                <a rel="nofollow" href="/sitemap" target="_blank">网站地图</a>
            </p>
            <div class="call-us">
                <div class="qrcode-wrap">
                    <span style="display: block;line-height: 1.3;white-space: nowrap;letter-spacing:2px;position: absolute;right:-30px;top: 17px;color:#999;">下载APP</span>
                    <i class="icon icon-mobile" style="position:relative;right:60px;"></i>
                    <i class="icon icon-app-qrcode qrcode" style="left:-102px;"></i>
                </div>
                <div class="qrcode-wrap">
                    <span style="display: block;line-height: 1.3;white-space: nowrap;letter-spacing:2px;position: absolute;left:30px;top: 17px;color:#999;">关注公众号</span>
                    <i class="icon icon-weixin"></i>
                    <i class="icon icon-weixin-qrcode qrcode"></i>
                </div>
            </div>
        </div>
        <div class="site-copyright" style="text-align:left;">
            <p>©2015-2020 深圳易找房信息技术有限公司&nbsp;&nbsp;版权所有&nbsp;&nbsp;<a href="http://beian.miit.gov.cn" target="_blank"
                                                                      rel="nofollow">粤ICP备15073386号</a></p>
            <span class="hotline" style="position: absolute;top: 30px;right: 0;font-size: 14px;">服务热线：132-6682-1881（9:00 - 18:00）</span>
        </div>
    </div>
</div>
<script id="suggest_tpl" type="text/html">
    <form id="suggest_form">
        <div class="form-group">
            <div class="textarea-group">
                <label>反馈内容</label>
                <textarea name="content" placeholder="欢迎提出您在使用过程中遇到的问题或宝贵建议，感谢您的支持。"></textarea>
            </div>
            <div class="input-group" style="height:100px;">
                <label>联系方式</label>
                <input type="text" name="email" placeholder="请留下您的手机或邮箱" style="margin-top:5px;" value="{{fu_mobile}}">
            </div>
            <div class="button-group">
                <input type="submit" value="提交反馈">
            </div>
        </div>
    </form>
</script>
<script src="/common/js/jquery-1.11.3.min.js"></script>
<span id="shijian" style="display:none;">
<div tabindex="0" style="opacity: 0.7; background: rgb(0, 0, 0); position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; user-select: none; z-index: 1027;" class="ui-popup-backdrop"></div>
<div tabindex="-1" class="ui-popup ui-popup-modal ui-popup-show ui-popup-focus" role="alertdialog"
     style="position: absolute; outline: 0px; left: 610px; top: 282px; z-index: 1027;">
    <div i="dialog" class="ui-dialog">
        <div class="ui-dialog-arrow-a"></div>
        <div class="ui-dialog-arrow-b"></div>
        <table class="ui-dialog-grid">
            <tbody>
            <tr>
                <td i="header" class="ui-dialog-header">
                    <button i="close" class="ui-dialog-close" id="shijcolse" title="cancel">×</button>
                    <div i="title" class="ui-dialog-title">变更看房时间</div>
                </td>
            </tr>
            <tr>
                <td i="body" class="ui-dialog-body">
                    <div i="content" class="ui-dialog-content"
                         style="width: 400px; height: 70px;">
                        <form id="change_time_form" novalidate="novalidate" data-type="1"
                              style="display: block;">
                            <div class="input-wrap ma-top">
                                <input name="fu_time" type="text" class="input valid" placeholder="选择时间"
                                       id="datetimepicker2">
                            </div>
                        </form>
                    </div>
                </td>
            </tr>
            <tr>
                <td i="footer" class="ui-dialog-footer">
                    <div i="statusbar" class="ui-dialog-statusbar" style="display: none;"></div>
                    <div i="button" class="ui-dialog-button">
                        <button type="button" i-id="确定" autofocus="" id="shijiqudin" class="ui-dialog-autofocus">确定</button>
                        <button type="button" i-id="取消" id="quxiao3">取消</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</span>
<script th:src="@{/lib/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
        let form = layui.form;
        let laydate = layui.laydate;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;

        laydate.render({elem: "#datetimepicker2", type: "datetime"});

       /* form.verify({
            birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
        });*/

        c();

        function yuyue() {
            var ccc = [[${retAppointmentList}]];
            var str = "<div class='con-box'>";
            $.each(ccc, function (index, value) {
                if(ccc != null && ccc != ""){
                    str += "<table class='table'>" +
                        "<tbody><tr>" +
                        " <td class='size1 tab-apart'>" +
                        "<a href=/retAddress/houseDetails?id="+this.ret_id+" target='_blank' class='col-pic-holder'>" +
                        "<img class='lazy' data-original='" + this.ret_picture + "' src='" + this.ret_picture + "' style='display: block;'>" +
                        "</a>" +
                        "<ul class='apt-des'>" +
                        "<li>" + this.lease_out + "</li>" +
                        "<li>"+this.properties+"</li>" +
                        "<td class='size2'>" +
                        "<p>" + this.huxing_type + "</p>" +
                        "<p>" + this.money + "<span>元/月</span></p>" +
                        "</td>" +
                        "<td class='size3'>" +
                        ""+this.TYPE+"<div class='apt-contactor'>" +
                        "<a class='c-blue'>联系方式</a>" +
                        "<ul class='apt-contactor-con'>" +
                        "<li class='weixin link' data-id='48949'>关注微信公众号查看联系方式</li>" +
                        "</ul>" +
                        "</div>" +
                        "</td>" +
                        "<td class='size4 tab-time'>" +
                        "-- </td>" +
                        "<td class='tab-operate size5'>" +
                        "<ul data-id='48949' data-time='' data-status='"+this.TYPE+"' data-type='4'>" +
                        "<li class='ap_cancel tab-operate-item' data-status='"+this.rental_stateid+"' value='" + this.id + "'>取消</li>" +
                        "<li class='ap_change tab-operate-item' data-status='"+this.rental_stateid+"' value='"+this.id+"'>变更</li>" +
                        // "<li class='ap_advise tab-operate-item'>投诉</li>" +
                        "</ul>" +
                        "</td>" +
                        "</tr>" +
                        "</tbody></table>";
                }else{
                    str+="<div class='col-info no-apt'><span>暂无房源</span></div>"
                }
            })
            str += "</div>";
            $("#main").append(str)
        };

        yuyue();


        var id;
        var quxiaoYuanyin;
        $(".ap_cancel").click(function () {
            var zhi = $(this).attr("data-status");
            id = $(this).attr("value");
            if(zhi != 18){
                alert("当前状态不能被修改或删除")
            }else{
                $("#yuding").css("display", "block");
            }
        })

        $("#quxiao").click(function () {
            quxiaoYuanyin = $("#qxYuanyin").val();
            $.ajax({
                type: "post",
                url: "/retPersonage/aptQuxiao",
                data: {"id": id,"quxiaoYuanyin":quxiaoYuanyin},
                dataType: "json",
                success: function (result) {//返回数据根据结果进行相应的处理
                    if (result == "0") {
                        okLayer.greenTickMsg("取消成功", function () {
                            window.location.href = "/retPersonage/appointment";
                        });
                    } else {
                        okLayer.greenTickMsg("取消失败", function () {
                            window.location.href = "/retPersonage/appointment";
                        });
                    }
                }
            })
        });

        $(".ap_change").click(function () {
            var zhi = $(this).attr("data-status");
            id = $(this).attr("value");
            if(zhi != 18){
                alert("当前状态不能被修改或删除")
            }else{
                $("#shijian").css("display", "block");
            }
        })

        $("#shijiqudin").click(function () {
            quxiaoYuanyin = $("#datetimepicker2").val();
            $.ajax({
                type: "post",
                url: "/retPersonage/biangen",
                data: {"id": id,"appointmentTime":quxiaoYuanyin},
                dataType: "json",
                success: function (result) {//返回数据根据结果进行相应的处理
                    if (result == "0") {
                        okLayer.greenTickMsg("变更成功", function () {
                            window.location.href = "/retPersonage/appointment";
                        });
                    } else {
                        okLayer.greenTickMsg("变更失败", function () {
                            window.location.href = "/retPersonage/appointment";
                        });
                    }
                }
            })
        });


        $(document).on('click','#shijcolse',function(){
            $("#shijian").css("display", "none");
        })

        $(document).on('click','#yudincolse',function(){
            $("#yuding").css("display", "none");
        })

        $(document).on('click','#quxiao3',function(){
            $("#shijian").css("display", "none");
        })

        $(document).on('click','#quxiao1',function(){
            $("#yuding").css("display", "none");
        })
    });

    function c() {
        var user = $("#username").val();
        var t = $("#login_holder");
        user ? t.html('<div class="drop-wrap"><a href="/retPersonage/personage"><span class="icon_user"></span><span>' + user + '</span></a><ul class="arrow-top nav-down-wrap"><li><a href="/retPersonage/personage" target="_blank">个人中心</a></li><li><a href="/retAddress/logout" data-toggle="logout">退出登录</a></li></ul>') : t.html('<a href="#loginModal" rel="noffolow" data-toggle="modal" data-target="#loginModal">注册/登录</a>')
    }
</script>
</body>
</html>